import React, { Component } from 'react'
import Header from '../../components/header/header'
import { Form, Input, Button,Toast } from "antd-mobile"

//logo
import img from "../../assets/img/pic_logo_orange.png"
import "./register.less"
import { reqregister } from '../../http/api'

export default class register extends Component {
  constructor() {
    super();
    this.state = {
      user: {
        phone: "",
        nickname: "",
        password: "",
      }
    }
  }
  changeUser(e, key) {
    this.setState({
      user:{
        ...this.state.user,
        [key]:e
      }
    })
  }
  register=()=>{
    reqregister(this.state.user).then(res=>{
      if(res.data.code==200){
        Toast.show({
          icon:"success",
          content:res.data.msg
        })
        //跳转登录
        this.props.history.push("/login")
      }
    })
  }
  render() {
    let { user } = this.state
    return (
      <div className='register'>
        <Header text="注册" back></Header>
        <Form layout='horizontal'>
          <img src={img} alt="" />
          <Form.Item label='手机号' name='phone'>
            <Input placeholder='请输入手机号' onChange={(e) => this.changeUser(e, "phone")} clearable />
          </Form.Item>
          <Form.Item label='用户名' name='nickname'>
            <Input placeholder='请输入用户名' onChange={(e) => this.changeUser(e, "nickname")} clearable />
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' onChange={(e)=>this.changeUser(e,"password")} clearable type='password' />
          </Form.Item>
          <Button block color="primary" size="large" onClick={this.register}>
            注册
          </Button>       
          </Form>
      </div>
    )
  }
}
